<template>
  <div id="userManagerPage">
    <a-input-search
        style="max-width: 300px; margin-bottom: 16px"
        v-model:value="searchValue"
        placeholder="输入用户名搜索"
        enter-button="搜索"
        size="large"
        @search="onSearch"
    />

    <a-table :columns="columns" :data-source="data">
      <!--针对某一列进行单独修改, record为当前行数据-->
      <!--插槽-->
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'avatar'">
          <a-image :src="record.avatar" :width="120" />
        </template>
        <template v-if="column.dataIndex === 'userName'">
          <a>
            {{ record.userName }}
          </a>
        </template>
        <template v-if="column.dataIndex === 'createTime'">
          {{ dayjs(record.createTime).format("YYYY.MM.DD HH:mm:ss") }}
        </template>
        <template v-if="column.dataIndex === 'action'">
        <span>
          <a-button danger @click="doDelete(record.id)">删除</a-button>
        </span>
        </template>
      </template>
    </a-table>
  </div>


</template>
<script lang="ts" setup>
import { ref } from "vue";
import {delUser, listUser} from "@/api/user";
import {message} from "ant-design-vue";
import dayjs from "dayjs";

const searchValue = ref("")

const onSearch = () => {
  fetchData(searchValue.value)
}

const doDelete = async (id : any) => {
  const res = await delUser(id);
  if(res.data.code == 200 ){
    message.success("删除成功");
  } else {
    message.error("删除失败");
  }
  await fetchData();
}


const columns = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: 'userId',
    dataIndex: 'userId',
  },
  {
    title: '用户名',
    dataIndex: 'userName'
  },
  {
    title: '密码',
    dataIndex: 'password'
  },
  {
    title: '头像',
    dataIndex: 'avatar'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '修改时间',
    dataIndex: 'updateTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
];

const data = ref([]);

const fetchData = async (userName = "") => {
  const res = await listUser(userName);
  if(res.data.data) {
    data.value = res.data.data.list;
  }else{
    message.error("获取用户数据失败");
  }
}

fetchData();


</script>

<style>

</style>
